<template>
  <div class="ele-body">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="JP中奖记录" name="first">
          <!-- 搜索表单 -->
          <el-form style="margin-top: 10px"
                   :model="where"
                   label-width="77px"
                   class="ele-form-search"
                   @keyup.enter.native="reload"
                   @submit.native.prevent>
            <el-row :gutter="15">
              <el-col :lg="6" :md="12">
                <el-form-item label="选择游戏:">
                  <el-select
                    clearable
                    class="ele-block"
                    v-model="where.JackpotName"
                    placeholder="请选择游戏">
                    <el-option
                      v-for="item in gameList"
                      :key="item.ID"
                      :value="item.ID"
                      :label="item.JackpotName"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="玩家类型:">
                  <el-select
                    clearable
                    class="ele-block"
                    v-model="where.IsAndroid"
                    placeholder="请选择玩家类型">
                    <el-option label="Robot" :value="1"/>
                    <el-option label="User" :value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="玩家ID:">
                  <el-input
                    v-model="where.UserID"
                    placeholder="请选择玩家ID"
                    clearable/>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="开始时间:">
                  <el-date-picker
                    type="datetime"
                    class="ele-fluid"
                    v-model="where.start_LastLogonDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择开始时间"/>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="结束时间:">
                  <el-date-picker
                    type="datetime"
                    class="ele-fluid"
                    v-model="where.end_LastLogonDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择结束时间"/>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <div class="ele-form-actions">
                  <el-button
                    type="primary"
                    @click="reload"
                    icon="el-icon-search"
                    class="ele-btn-icon">查询
                  </el-button>
                  <el-button @click="reset">重置</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <!-- 数据表格 -->
          <ele-pro-table
            ref="table"
            :datasource="url"
            :columns="columns"
            :where="where"
            height="calc(100vh - 315px)">
            <!-- 表头工具栏 -->
            <template slot="toolbar">
              <el-span
                type="primary">合计 Robot：{{amount}} 总中奖：{{totalAmount}}
              </el-span>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="JP库存" name="second">
          <ele-pro-table
            ref="table"
            :datasource="recordUrl"
            :columns="recordColumns"
            :where="recordWhere"
            height="calc(100vh - 315px)">
          </ele-pro-table>

        </el-tab-pane>
        <el-tab-pane label="JP变化记录" name="three">
          <ele-pro-table
            ref="table"
            v-if=""
            :datasource="recordUrl"
            :columns="recordColumns"
            :where="recordWhere"
            height="calc(100vh - 315px)">
          </ele-pro-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import Tools from "@/config/tools";

export default {
  name: 'SystemJackpotLottery',
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      // 表格数据接口
      url: '/admin/account.accountsInfo/index',
      recordUrl: '/admin/platform.exchangeconfig/index',
      activeName: 'first',
      // 表格列配置
      columns: [
        {
          prop: 'UserID',
          label: '玩家昵称/玩家ID',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: 'JackpotName',
          label: '游戏',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'WinScore',
          label: '玩家类型',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          formatter: (row, column, cellValue) => {
            if (cellValue == 1) {
              return 'Robot'
            }
            return 'User'
          }
        },
        {
          prop: 'WinScore',
          label: '中奖金额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          formatter: (row, column, cellValue) => {
            return Tools.getCurrency(cellValue)
          }
        },
        {
          prop: 'LastLogonDate',
          label: '时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        }
      ],
      recordColumns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'ID',
          label: 'ID',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },
        // {
        //   prop: 'ChannelID',
        //   label: '子渠道ID',
        //   width: 60,
        //   align: 'center',
        //   showOverflowTooltip: true,
        //   fixed: "left"
        // },
        {
          prop: 'ProductName',
          label: '兑换渠道',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'ExchangeChannelName',
          label: '兑换类型',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'Sort',
          label: '排序',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'Nullity',
          label: '状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
      ],
      // 表格搜索条件
      where: {},
      recordWhere: {},
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 机器人合计金额
      amount: '0.00',
      // 合计总中奖金额
      totalAmount: '0.00',
      // 游戏列表
      gameList: []
    }
  },
  mounted() {
    this.queryGames();  // 查询游戏列表
  },
  methods: {
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.daterange = null;
      this.reload();
    },
    openEdit(row) {
      console.log(row)
      this.current = row;
      this.showEdit = true;
    },
    /* 查询游戏列表 */
    queryGames() {
      this.$http.get('/admin/account.accountsInfo/getGameList').then(res => {
        if (res.data.code === 0) {
          this.gameList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    }
  }
}
</script>

<style scoped>
</style>
